<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2024-01-18 13:02:18
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-07-09 10:37:02
 * @FilePath: /things-admin/src/view/commentmanagement/EditComment.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="core">
    <div class="content">
      <div class="headsculpture">
        <div class="desc">头像:</div>
        <div class="img">
          <img
            :src="$route.query.avatar"
            style="width: 50px; height: 50px"
            alt=""
          />
        </div>
      </div>
      <div class="username">
        <div class="desc">昵称：</div>
        <!-- <div class="content">{{ info }}</div> -->
        <Input
          disabled
          type="text"
          v-model="$route.query.nickname"
          style="width: 300px"
        ></Input>
      </div>
      <div class="content-child">
        <div class="desc">内容:</div>
        <Input
          disabled
          v-model="info.content"
          type="textarea"
          :resize="true"
          :autosize="{ minRows: 3, maxRows: 3 }"
          style="width: 300px"
        />
      </div>
      <div class="vedioOrpic">
        <div class="desc">
          图片/<br />
          视频：
        </div>
        <div
          v-show="info.urlType != 0"
          class="demo-upload-list"
          v-for="(item, index) in list"
          :key="index"
        >
          <template>
            <img v-show="info.urlType == 1" :src="item.iconUrl" />
            <video v-show="info.urlType == 2" poster="video-poster.jpg">
              <source :src="item.iconUrl" type="video/mp4" />
            </video>
            <div class="demo-upload-list-cover">
              <Icon
                type="ios-eye-outline"
                @click.native="handleView(item.iconUrl)"
              ></Icon>
              <!-- <Icon
                type="ios-trash-outline"
                @click.native="handleRemoveApp(index)"
              ></Icon> -->
            </div>
          </template>
        </div>

        <!-- <Upload
          v-show="info.urlType != 0"
          :action="action"
          :show-upload-list="false"
          :headers="headers"
          :on-format-error="handleFormatError"
          :on-exceeded-size="handleMaxSize"
          :on-success="handleSuccessApp"
          type="drag"
          multiple
          style="display: inline-block; width: 58px; margin-left: 15px"
        >
          <div style="width: 58px; height: 58px; line-height: 58px">
            <Icon type="ios-camera" size="20"></Icon>
          </div>
        
        </Upload> -->
        <span style="margin-left: 20px" v-show="info.urlType == 0">空</span>
      </div>
      <div class="likecount">
        <div class="desc">点赞数：</div>
        <Input
          type="text"
          v-model="info.likeNumber"
          style="width: 300px"
          disabled
        ></Input>
      </div>
      <div class="username">
        <div class="desc">链接：</div>
        <Input
          type="text"
          v-model="info.linkUrl"
          style="width: 300px"
        ></Input>
      </div>
      <div class="toexamine">
        <div class="desc">审核：</div>
        <RadioGroup v-model="info.approvalStatus">
          <Radio :label="0">审核中</Radio>
          <Radio :label="1">已发布</Radio>
          <Radio :label="2">未通过</Radio>
        </RadioGroup>
      </div>
      <Input
        v-show="info.approvalStatus == 2"
        type="textarea"
        v-model="info.reason"
        :resize="true"
        :autosize="{ minRows: 3, maxRows: 3 }"
        placeholder="审核原因必填"
        style="width: 300px; margin-left: 50px; margin-top: 20px"
      ></Input>
      <div class="footer">
        <Button
          type="primary"
          size="default"
          style="margin-right: 140px"
          @click="returnPage"
          >返回</Button
        >
        <Button type="primary" size="default" @click="editData">确定</Button>
      </div>
    </div>
    <Modal title="View Image" v-model="dialogVisible">
            <img :src="dialogImageUrl" style="width: 100%" />
          </Modal>
  </div>
</template>

<script>
import { baseUrl } from "@/base/Request";
import { editData, monentPut } from "@/base/api/Moments";
import { store } from "@/store/Store";

export default {
  data() {
    return {
      info: "",
      list: [],
      action: `${baseUrl}/api/upload/image`,
      headers: {
        Authorization: "Bearer " + store.state.auth.accessToken,
      },
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    getEditData() {
      editData(this.$route.query.id).then((res) => {
        this.info = res.data;
        this.list = this.info.urls.split(",").map((x) => {
          return { name: "name", iconUrl: x, status: "finished" };
        });
      });
    },
    editData() {
      let urlArr = [];
      this.list.forEach((item) => {
        urlArr.push(item.iconUrl);
      });
      console.log();

      this.info.urls = urlArr.join(",");
      if (this.info.approvalStatus == 2 && !this.info.reason) {
        this.$message.error("审核原因必填");
        return false;
      }
      monentPut(this.info).then((res) => {
        this.$message.success("修改成功");
        this.$router.push("/management");
      });
    },
    handleSuccessApp(res, file) {
      if (this.info.urlType == 2) {
        var videoRegex = /\.(mp4|avi|mov|wmv|flv|mkv)$/i;
        if (videoRegex.test(res.data[0])) {
          this.list = [];
          this.list.push({
            name: "name",
            iconUrl: res.data[0],
            status: "finished",
          });
        } else {
          this.$message.error("请正确上传视频");
        }
      } else {
        if (this.list.length >= 9) {
          this.$message.info("最多添加九张");
        } else {
          this.list.push({
            name: "name",
            iconUrl: res.data[0],
            status: "finished",
          });
        }
      }
    },
    handleView(url) {
      if (this.info.urlType === 2) {
        window.open(url, "_blank");
 
      }else{
        this.dialogImageUrl = url;
        this.dialogVisible = true;
      }
   
    },
    // 返回
    returnPage() {
      this.$router.push("/management");
    },
    handleFormatError(file) {
      this.$Message.error("请选择格式为.JPG、.PNG格式的文件");
    },
    handleMaxSize(file) {
      this.$Message.error("文件不能超出50k");
    },
    handleRemoveApp(file) {
      this.list.splice(file, 1);
    },
  },
  mounted() {
    this.getEditData();
  },
};
</script>

<style lang="less" scoped>
.core {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  .content {
    .username {
      display: flex;
      margin-top: 20px;
      align-items: center;
      .desc {
        width: 60px;
      }
    }
    .vedioOrpic {
      display: flex;
      align-items: center;
      margin-top: 20px;
    }
    .footer {
      margin-top: 40px;
    }
    .likecount {
      display: flex;
      align-items: center;
      margin-top: 20px;
    }
    .toexamine {
      display: flex;
      align-items: center;
      margin-top: 20px;
    }
    .headsculpture {
      display: flex;
      align-items: center;

      .img {
        margin-left: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .content-child {
      display: flex;
      margin-top: 20px;
      align-items: center;
      .desc {
        width: 60px;
      }
    }
  }
}
</style>
